<template>
  <div class="red-packets">
    <van-nav-bar title="我的红包" left-arrow @click-left="goBack" />
    <div v-for="redPacket in redPackets" :key="redPacket.id" class="red-packet-item">
      <van-card
          :title="redPacket.amount + '元红包'"
          :desc="redPacket.desc"
          :thumb="redPacket.image"
      >
        <template #footer>
          <van-tag type="danger">{{ redPacket.expiry }}</van-tag>
        </template>
      </van-card>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const goBack = () => {
  router.back()
}

const redPackets = ref([
  { id: 1, amount: 20, desc: '全场通用', image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcStaC8hlgUpO-7yEpHfxbpy-ZBf7zpVfq1Y-g&s', expiry: '2024-11-30' },
  { id: 2, amount: 50, desc: '限新用户', image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcStaC8hlgUpO-7yEpHfxbpy-ZBf7zpVfq1Y-g&s', expiry: '2024-12-01' },
])
</script>

<style scoped>
.red-packet-item {
  margin-bottom: 15px;
}
</style>
